<template>
	<view class="top_horizontal_line"></view>
	<view class="order_list_box">
		<view class="order_tab_box">
			<view class="order_type_tab_box">
				<view
					:class="['order_type_tab_head', item.status === table.orderType ? 'order_type_tab_head_active' : '']"
					@click="handelChangeOrderType(item)"
					v-for="item in orderTab"
					:key="item.status">
					<view class="type_text">{{ item.name }}</view>
					<view class="active_type"></view>
				</view>
			</view>
			<view class="tab_status_type_box">
				<view class="order_status_type_box">
					<view class="status_type_box" :class="tabStatus.length > 5 ? 'w_100vw' : ''">
						<view
							:class="['order_status_text', item.status === table.status ? 'active_order_status' : '']"
							@click="handleChangeStatus(item)"
							v-for="item in tabStatus"
							:key="item.name + item.status">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_tips" v-if="table.orderType == -1 && table.list.length > 0">多天的订单，为了方便服务，接单后将按天自动拆分。</view>
		<view class="order_list_item_box" v-if="table.list.length > 0">
			<view class="order_item_box" v-for="item in table.list" :key="item" @click="toDetail(item)">
				<view class="order_status_box">
					<view class="name_status">
						<view class="name_transfer">
							<image class="user_avatar_pic" :src="item.userAvatar"></image>
							<view class="studio_name">{{ item.userNickName }}</view>
							<view class="transfer_order" v-if="item.studioDispatchNum">转单</view>
						</view>
						<view class="order_status">{{ getStatusText(item.status) }}</view>
					</view>
					<view class="order_date">订单号：{{ item.id }}</view>
				</view>
				<view class="studio_name_text">{{ item.studioName }}</view>
				<view class="order_server_info">
					<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="item?.orderGoodsSkuVOS?.length > 1">
						<view class="server_info_box" v-for="val in item.orderGoodsSkuVOS" :key="val.skuId">
							<image class="server_img" :src="val.goodsAvatar"></image>
							<view class="specs_box">{{ val.goodsName }}</view>
							<!--							<view class="server_price">×{{ val.serviceDays }}</view>-->
						</view>
					</scroll-view>
					<view class="server_info_box" v-if="item?.orderGoodsSkuVOS?.length == 1">
						<image class="server_img" :src="item?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
						<view class="name_price">
							<view class="server_name">{{ item?.orderGoodsSkuVOS[0]?.goodsName }}</view>
							<view class="specs_price">
								<text class="server_specs" v-if="item.type == 1">¥{{ item?.orderGoodsSkuVOS[0]?.price }}/次</text>
								<text class="server_specs" v-else>{{ item?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ item?.orderGoodsSkuVOS[0]?.price }}</text>
							</view>
						</view>
					</view>
					<view class="order_price_box">
						<view class="order_price">¥{{ Number(item.payAmount) }}</view>
						<view class="pay_text">{{ getPayText(item.status) }}</view>
					</view>
				</view>
				<view class="order_other_info_box">
					<view class="other_info_item" v-if="item.joinId">
						<view class="other_label">关联订单</view>
						<view class="other_value">{{ item.joinId }}</view>
					</view>
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">宠物{{ item.petNum }}只</view>
						<view class="other_value">
							<text v-for="(val, valIndex) in item.petList" :key="valIndex">
								{{ val.petNickName }}({{ getPetTypeText(val.type) }})
								<text class="m_l_r_8" v-if="valIndex < item.petList.length - 1">|</text>
							</text>
						</view>
					</view>
					<view class="other_info_item">
						<template v-if="table.orderType == -1">
							<view class="other_label">服务{{ item.serviceDays }}天</view>
							<view class="other_value">
								<text v-for="(val, valIndex) in item.serviceTimeSlotArray" :key="valIndex">
									{{ val.slice(5, 10).replace(/-/g, "/") }}
									<text class="m_l_r_8" v-if="valIndex < item.serviceTimeSlotArray.length - 1">|</text>
								</text>
							</view>
						</template>
						<template v-else>
							<view class="other_label">服务时间</view>
							<view class="other_value">{{ item.serviceStartTime?.substring(0, 10) }}&nbsp;{{ handleDoorTime(item.doorTime) }}</view>
						</template>
					</view>
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">服务地址</view>
						<view class="other_value">{{ item.address }}</view>
					</view>
					<view class="other_info_item" v-if="item.type == 1 && item?.petList?.length">
						<view class="other_label">服务宠物</view>
						<view class="other_value">
							<text class="pet_name_date" v-for="(val, i) in item.petList" :key="i">{{ val.petNickName }}</text>
						</view>
					</view>
				</view>
				<view class="pet_teacher_box">
					<view class="pet_teacher_title">下单用户</view>
					<image class="pet_teacher_img" :src="item.userAvatar"></image>
					<view class="pet_teacher_name">{{ item.userNickName }}</view>
				</view>
				<view
					class="pet_teacher_box"
					v-if="([2, 3, 4].includes(item.status) && item.petsitterUserId && table.orderType == -1) || (item.petsitterUserId && table.orderType == 0)">
					<view class="pet_teacher_title">服务陪宠师</view>
					<image class="pet_teacher_img" :src="item.petsitterAvatar"></image>
					<view class="pet_teacher_name">{{ item.petsitterRealName }} | {{ item.petsitterNickName }}</view>
				</view>
				<view class="order_total_price">
					<text>{{ getPayText(item.status) }}：¥{{ Number(item.payAmount) }}</text>
					<template v-if="![0, 5, 6, 7].includes(item.status)">
						<text v-if="identity == 1">,工作室收益：¥{{ Number(item.studioSharing) }}</text>
						<text>,服务收益：¥{{ Number(item.income) }}</text>
					</template>
				</view>
				<view class="operation_btn_box">
					<template v-if="table.orderType == -1">
						<template v-if="identity == 1 && item.petsitterType != 1">
							<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[8].includes(item.status) && item.type != 1" @click.stop="handleCancelAllOrder(item)">
								取消订单
							</view>
							<!--							<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1, 8].includes(item.status) && item.type == 1" @click.stop="handleRefuse(item)">拒绝接单</view>-->
							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[8].includes(item.status)" @click.stop="handleAccept(item)">立即接单</view>
							<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[8].includes(item.status) && item.type != 1" @click.stop="handleTransferOrder(item)">转单</view>
							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[8].includes(item.status) && item.type != 1" @click.stop="handleDispatch(item)">立即派单</view>
							<!--							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[0].includes(item.status)" @click.stop="handleChangePrice(item)">修改价格</view>-->
						</template>
						<view
							class="xjs-btn-primary-plain hollow_btn btn_mg"
							v-if="
								(identity == 1 && item.petsitterType != 1 && [1, 8].includes(item.status) && item.type == 1) ||
								(identity == 1 && userInfo.id == item.petsitterUserId && [1, 8].includes(item.status))
							"
							@click.stop="handleRefuse(item)">
							拒绝接单
						</view>
						<template v-if="identity == 1 && userInfo.id == item.petsitterUserId">
							<!--							<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1, 8].includes(item.status)" @click.stop="handleRefuse(item)">拒绝接单</view>-->
							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1, 8].includes(item.status)" @click.stop="handleAccept(item)">立即接单</view>
						</template>
						<template v-if="identity != 1 && item.status == 1">
							<view class="xjs-btn-primary-plain refuse_btn" @click.stop="handleRefuse(item)">拒绝接单/转单</view>
							<view class="accept_immediately_box" @click.stop="handleAccept(item)" v-if="item.type != 1">
								<view class="accept_immediately">立即接单</view>
								<view class="immediately_time">{{ filterTime(item.orderDispatchAutoCancelTime) }}后未接单将自动转派</view>
							</view>
							<view v-else class="xjs-btn-primary solid_btn btn_mg" @click.stop="handleAccept(item)">立即接单</view>
						</template>
					</template>
					<template v-if="table.orderType === 0 && userInfo.id == item.petsitterUserId">
						<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1].includes(item.status)" @click.stop="handleCancel(item)">取消订单</view>
						<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1].includes(item.status) && item.type != 1" @click.stop="handleConfirmArrival(item)">我已到达</view>
						<view class="xjs-btn-primary solid_btn btn_mg" v-if="[2].includes(item.status) && item.type != 1" @click.stop="handleDailyService(item)">服务完成</view>
						<!--						<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[3].includes(item.status) && !item.uploadedDailyFlag" @click.stop="handleDailyService(item)">-->
						<!--							上传服务日常-->
						<!--						</view>-->
					</template>
				</view>
			</view>
			<uni-load-more iconType="auto" :status="table.loading" />
		</view>
		<view class="empty_box" v-else>
			<image class="empty_img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png"></image>
			<view>暂无数据~</view>
		</view>
	</view>
	<uni-popup ref="refusePopupRef" type="bottom" :is-mask-click="false">
		<view class="refuse_pop">
			<view class="pop_title_box">
				<view class="pop_title">确定拒绝接单吗？</view>
				<uni-icons @click="handleClosePop()" class="closeempty_icon" type="closeempty" size="26"></uni-icons>
			</view>
			<view class="refuse_reason_box">
				<view class="refuse_title">原因：</view>
				<view class="reason_item_box">
					<textarea placeholder-style="color:#CACCCC;" class="refuse_textarea" v-model="reasonInfo.reason" maxlength="50" placeholder="输入原因"></textarea>
				</view>
			</view>
			<view class="footer_btn_box">
				<view class="xjs-btn-primary confirm_btn" @click="handleConfirm()">确认</view>
			</view>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, watch, computed } from "vue";
import { onPullDownRefresh, onReachBottom, onShow, onLoad } from "@dcloudio/uni-app";

import api from "@/api/index";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { useUserStoreToRefs } from "@/store/useUserStore";
import dayjs from "dayjs";

let { identity, studio, studioBalance } = useStudioStoreToRefs();
let { userInfo } = useUserStoreToRefs();

let reasonInfo = reactive({
	id: "",
	reason: ""
});

let reason = ref("");
let refusePopupRef = ref();

const handleOpenPop = (item) => {
	reasonInfo.id = item.id;
	refusePopupRef.value.open();
};
const handleClosePop = () => {
	refusePopupRef.value.close();
	reasonInfo.id = "";
	reasonInfo.reason = "";
};
const handleConfirm = async () => {
	if (reasonInfo.reason.trim() == "") {
		uni.showToast({
			title: "请输入拒绝原因",
			icon: "none"
		});
		return;
	}
	const res = await api({
		method: "post",
		url: `/mall/order/refuse`,
		data: {
			orderId: reasonInfo.id,
			refuseReason: reasonInfo.reason
		}
	});
	if (res.code == 0) {
		uni.showToast({
			title: "拒绝成功",
			icon: "none"
		});
	}
	handleClosePop();
	await onDataInit();
};
const orderTab = reactive([
	{ name: "总订单", status: -1 },
	{ name: "日订单", status: 0 }
]);
// 总订单  店长
const tabStoreManagerStatus = reactive([
	{ name: "全部", status: -1 },
	{ name: "待付款", status: 0 },
	{ name: "待派单", status: 8 },
	{ name: "待接单", status: 1 },
	{ name: "已接单", status: 2 },
	{ name: "已完成", status: 4 }
]);
// 总订单  陪宠师
const tabPetTeacherStatus = reactive([
	{ name: "全部", status: -1 },
	{ name: "待接单", status: 1 },
	{ name: "已接单", status: 2 },
	{ name: "已完成", status: 4 }
]);
// 日订单
const tabDayStatus = reactive([
	{ name: "全部", status: -1 },
	{ name: "待服务", status: 1 },
	{ name: "服务中", status: 2 },
	{ name: "已完成", status: 3 }
]);
const tabStatus = reactive([]);
const table = reactive<{
	loading: string;
	list: [];
	page: number;
	limit: number;
	status: number | string;
	orderType: number | string;
}>({
	loading: "more",
	list: [],
	page: 1,
	limit: 20,
	status: -1,
	orderType: -1
});
let orderId = ref();

const getPayText = (type) => {
	if (table.orderType == -1) {
		switch (type) {
			case 0:
				return "应付";
			case 5:
			case 6:
			case 7:
				return "合计";
			default:
				return "实付";
		}
	} else {
		switch (type) {
			case 4:
			case 5:
				return "合计";
			default:
				return "实付";
		}
	}
};
const getStatusText = (status) => {
	if (table.orderType == -1) {
		switch (status) {
			case 0:
				return "待付款";
			case 1:
				return "待接单";
			case 2:
			case 3:
				return "已接单";
			case 4:
				return "已完成";
			case 5:
			case 6:
			case 7:
				return "已取消";
			case 8:
				return "待派单";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 0:
				return "待接单";
			case 1:
				return "待服务";
			case 2:
				return "服务中";
			case 3:
				return "已完成";
			case 4:
			case 5:
				return "已取消";
			case 6:
				return "待付款";
			default:
				return "";
		}
	}
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
watch(
	() => [table.orderType, identity.value],
	(newVal, oldVal) => {
		if (newVal[0] == -1) {
			if (newVal[1] == 1) {
				tabStatus.splice(0, tabStatus.length, ...tabStoreManagerStatus);
			} else {
				tabStatus.splice(0, tabStatus.length, ...tabPetTeacherStatus);
			}
		} else {
			tabStatus.splice(0, tabStatus.length, ...tabDayStatus);
		}
	},
	{ immediate: true }
);

// 获取数据
const onDataGet = async () => {
	let url = "";
	if (table.orderType == -1) {
		url = "/mall/order/getOrderPage";
	} else {
		url = "/mall/order/order-detail/page";
	}
	return new Promise(async (resolve, reject) => {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
		table.loading = "loading";
		try {
			const {
				data: { total = 0, records = [] }
			} = await api({
				method: "get",
				contentType: "json",
				url: url,
				data: {
					page: table.page,
					limit: table.limit,
					studioId: studio.value.id,
					status: table.status
				}
			});
			table.list = table.page == 1 ? records : table.list.concat(records);
			if (!records.length || table.list.length >= total) {
				table.loading = "noMore";
			} else {
				table.loading = "more";
			}
			uni.hideLoading();
			resolve(true);
		} catch (error) {
			uni.hideLoading();
			table.loading = "more";
			reject(false);
		}
	});
};
// 数据初始化
const onDataInit = async (info = {}) => {
	console.log(info, "info");

	table.list = [];
	table.page = 1;
	await onDataGet();
};
const handelChangeOrderType = async (item) => {
	table.orderType = item.status;
	table.status = -1;
	await onDataInit();
};
const handleChangeStatus = async (item: any) => {
	table.status = item.status;
	await onDataInit();
	scrollToTop();
};
const scrollToTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
// 判断订单状态变更
const handleOrderStatusChange = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/checkOrderStatus?orderId=${item.id}&status=${item.status}&type=${table.orderType}`
		});
		if (res.code == 0) {
			if (res.data == 1) {
				uni.showModal({
					title: "提示",
					content: "数据已过期，请刷新重试",
					showCancel: false,
					confirmText: "好的",
					success: (res) => {
						if (res.confirm) {
							onDataInit();
						}
					}
				});
				reject(false);
			} else {
				resolve(true);
			}
		} else {
			reject(false);
		}
	});
};
// 修改价格
const handleChangePrice = async (item) => {
	await handleOrderStatusChange(item);
	uni.navigateTo({
		url: `/pages/studioOrders/orderPriceAdjustment/index?id=${item.id}&serviceDays=${item.serviceDays}&payAmount=${item.payAmount}&petNum=${item.petNum}&goodsSkuServiceTime=${item.goodsSkuServiceTime}&goodsName=${item.goodsName}`
	});
};

// 拒绝，转单
const handleRefuse = async (item) => {
	await handleOrderStatusChange(item);
	if (item.type === 1) {
		handleOpenPop(item);
	} else {
		uni.showModal({
			title: "确定拒绝接单/转单吗？",
			content: "注意：提交后订单将转派给其他陪宠师进行接单",
			success: async (res) => {
				if (res.confirm) {
					const res = await api({
						method: "post",
						url: `/mall/order/refuse`,
						data: {
							orderId: item.id
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "转单成功"
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
					await onDataInit();
				}
			}
		});
	}
};
// 获取其他待服务日单
const getOtherDayOrder = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/order-detail/getJoinOrderDetail`,
			data: {
				orderId: item.orderId,
				orderDetailId: item.id
			}
		});
		if (res.code == 0) {
			if (res.data.length > 1) {
				resolve(true);
			} else {
				resolve(false);
			}
		} else {
			reject(false);
		}
	});
};
// 日单取消订单
const handleCancel = async (item) => {
	await handleOrderStatusChange(item);
	const res = await getOtherDayOrder(item);
	if (res) {
		uni.navigateTo({
			url: `/pages/studioOrders/cancellationOrder/index?orderId=${item.orderId}&orderDetailId=${item.id}&orderType=${table.orderType}`
		});
	} else {
		uni.showModal({
			title: "确定取消订单吗？",
			content: "注意：确定后订单将关闭",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/studioOrders/cancellationReason/index?orderId=${item.orderId}&orderDetailId=${item.id}&checkedList=${item.id}&orderType=${table.orderType}`
					});
				}
			}
		});
	}
};
// 店长取消订单
const handleCancelAllOrder = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "确定取消订单吗？",
		content: "注意：确定后订单将关闭",
		success: async (res) => {
			if (res.confirm) {
				uni.navigateTo({
					url: `/pages/studioOrders/cancellationReason/index?orderId=${item.id}&orderType=${table.orderType}`
				});
			}
		}
	});
};

// 确认到达
const handleConfirmArrival = async (item) => {
	await handleOrderStatusChange(item);
	// 检查服务时间是否是今天
	if (!dayjs(dayjs(item.serviceStartTime, "YYYY-MM-DD")).isSame(dayjs())) {
		uni.showModal({
			title: "温馨提示",
			content: "服务单服务时间非今天，\n" + "确定提前到达开始服务吗？",
			confirmText: "确定",
			cancelText: "取消",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/confirmArriving/index?orderId=${item.id}&studioId=${studio.value.id}`
					});
				}
			}
		});
	}
};
// 立即派单
const handleDispatch = async (item) => {
	await handleOrderStatusChange(item);
	const res = await api({
		method: "get",
		url: `/mall/studio/petsitter-team/dispatchPage`,
		data: {
			page: 1,
			limit: 20,
			orderId: item.id
		}
	});
	if (res.code == 0) {
		uni.navigateTo({
			url: `/pages/myStudio/studio/selectDispatch/index?id=${item.id}&petsitterType=${item.petsitterType}&serviceDays=${item.serviceDays}&status=${item.status}`
		});
	} else {
		uni.showModal({
			title: "温馨提示",
			content: res.msg,
			showCancel: false,
			confirmText: "好的"
		});
	}
};
const transferOrderCheck = async (item) => {
	return new Promise(async (resolve, reject) => {
		try {
			const res = await api({
				method: "get",
				url: `/mall/order/transferOrderCheck`,
				data: {
					orderId: item.id
				}
			});
			resolve(res);
		} catch (e) {
			reject(e);
		}
	});
};
const handleTransferOrder = async (item) => {
	const checkRes = await transferOrderCheck(item);
	if (checkRes.data == 0) {
		uni.navigateTo({
			url: `/pages/myStudio/studio/selectTransferOrder/index?id=${studio.value.id}&longitudes=${item.addressAxis[0]}&latitudes=${item.addressAxis[1]}&orderId=${item.id}`
		});
	} else if (checkRes.data == 1) {
		uni.showModal({
			title: "温馨提示",
			content: "该单已被同城所有工作室拒绝过了\n" + "您可以自己接单或取消订单",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {}
		});
	} else if (checkRes.data == 2) {
		uni.showModal({
			title: "温馨提示",
			content: "本订单所在城市暂无工作室",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {}
		});
	}
};
// 立即接单
const handleAccept = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "提示",
		content: "确定接单？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/acceptV2`,
					data: {
						id: item.id
					}
				});
				if (res.code == 0) {
					uni.navigateTo({
						url: `/pages/myStudio/studio/dispatchSuccess/index?type=receivingOrders&id=${item.userId}&serviceDays=${item.serviceDays}&userNickName=${item.userNickName}&userAvatar=${item.userAvatar}`
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			}
		}
	});
};

// 上传服务日常
const handleDailyService = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
					await onDataInit();
				}
			}
		});
	} else {
		uni.navigateTo({
			url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
		});
	}
};

// 服务完成
const handleEndServer = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
					await onDataInit();
				}
			}
		});
	} else {
		uni.showModal({
			title: "提示",
			content: "确定完成服务吗？",
			success: async (res) => {
				if (res.confirm) {
					const res = await api({
						method: "post",
						url: `/mall/order/order-detail/finishV2`,
						data: {
							id: item.id
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "服务完成",
							icon: "none"
						});
						uni.navigateTo({
							url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}
			}
		});
	}
};
// 详情
const toDetail = (item: any) => {
	if (table.orderType == -1) {
		if (item.type == 1) {
			if ([2, 3].includes(item.status)) {
				uni.navigateTo({
					url: `/pages/studioOrders/addedServicesAllDetail/index?id=${item.id}&orderType=${table.orderType}&status=${item.status}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/studioOrders/addedServicesDetail/index?id=${item.id}&orderType=${table.orderType}`
				});
			}
		} else {
			if ([2, 3].includes(item.status)) {
				uni.navigateTo({
					url: `/pages/studioOrders/allOrderDetail/index?id=${item.id}&orderType=${table.orderType}&status=${item.status}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/studioOrders/orderDetail/index?id=${item.id}&orderType=${table.orderType}`
				});
			}
		}
	} else {
		if (item.type == 1) {
			uni.navigateTo({
				url: `/pages/studioOrders/addedServicesDetail/index?id=${item.id}&orderType=${table.orderType}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/studioOrders/orderDetail/index?id=${item.id}&orderType=${table.orderType}`
			});
		}
	}
};

const filterTime = (endTime) => {
	// let nowTime = getTimeFormat(getCurrentTime('date'))
	// if((Math.floor(getTimeFormat(endTime) - nowTime) / 3600) > 24){
	// 	return getCurrentTime('month',endTime) + ' ' + getCurrentTime('hour',endTime)
	// }
	let time = getCurrentTime("date");
	if (getCurrentTime("year", endTime) === getCurrentTime("year", time)) {
		return getCurrentTime("hour", endTime);
	}
	return getCurrentTime("month", endTime) + " " + getCurrentTime("hour", endTime);
};

//当前时间
const getCurrentTime = (type = "date", time = "") => {
	let date = time == "" ? new Date() : new Date(time); //当前时间
	let year = date.getFullYear(); //年
	let month = repair(date.getMonth() + 1); //月
	let day = repair(date.getDate()); //日
	let hour = repair(date.getHours()); //时
	let minute = repair(date.getMinutes()); //分
	let second = repair(date.getSeconds()); //秒

	let curTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

	if (type == "date") {
		return curTime;
	} else if (type == "month") {
		return month + "/" + day;
	} else if (type == "year") {
		return year + month + day;
	} else {
		return hour + ":" + minute;
	}
};

const repair = (i) => {
	if (i >= 0 && i <= 9) {
		return "0" + i;
	} else {
		return i;
	}
};

onShow(async () => {
	await onDataInit();
});
onLoad((options) => {
	console.log(options);
	if (options.hasOwnProperty("orderType")) {
		table.orderType = Number(options?.orderType);
	}
	if (options.hasOwnProperty("status")) {
		table.status = Number(options?.status);
	}
});
// 页面下拉刷新
onPullDownRefresh(async () => {
	console.log("onPullDownRefresh");
	if (table.loading == "loading") {
		uni.stopPullDownRefresh();
	} else {
		try {
			await onDataInit();
		} catch (error) {}
		uni.stopPullDownRefresh();
	}
});
// 触底
onReachBottom(() => {
	console.log("onReachBottom");
	if (table.loading == "noMore") return false;
	table.page++;
	onDataGet();
});
</script>

<style scoped lang="scss">
.order_list_box {
	box-sizing: border-box;
}

.order_tab_box {
	background: #f9f6f6;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
}

.order_type_tab_box {
	//position: sticky;
	//top: 0;
	//z-index: 1;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	background: #ffffff;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #e4e6e6;

	.order_type_tab_head {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.type_text {
			font-weight: 400;
			font-size: 28rpx;
			height: 100%;
			color: #5c5e5e;
			text-align: center;
		}
	}

	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1b2120;
		}

		.active_type {
			bottom: 0;
			width: 32rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
}

.tab_status_type_box {
	padding: 32rpx 40rpx 24rpx;
	box-sizing: border-box;
	//position: sticky;
	//top: 90rpx;
	//z-index: 1;
	background: #f9f6f6;

	.order_status_type_box {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
		scrollbar-width: none; /* 适用于 Firefox */

		.status_type_box {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
		}

		.w_100vw {
			width: 100vw;
		}

		.order_status_text {
			display: inline-block;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 110rpx;
			height: 58rpx;
			line-height: 58rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #7c807f;
			background: #fff;
			border-radius: 29rpx;
			margin-right: 28rpx;
		}

		.active_order_status {
			border-radius: 29rpx;
			border: 2rpx solid #ff6084;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 26rpx;
			color: #f87c90;
		}
	}

	.order_status_type_box::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
}

.order_tips {
	padding: 0 40rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #5c5e5e;
}

.order_list_item_box {
	padding: 24rpx 32rpx 24rpx;
	box-sizing: border-box;
	padding-bottom: calc(var(--safe-area-bottom) + 48rpx + 100rpx);

	.order_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.order_status_box {
			.name_status {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_transfer {
					display: flex;
					flex-direction: row;
				}

				.user_avatar_pic {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background: #f9f6f6;
					margin-right: 16rpx;
				}

				.studio_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1b2120;
				}

				.transfer_order {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 8rpx;
					box-sizing: border-box;
					height: 40rpx;
					background: #7777f3;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					margin-left: 8rpx;
				}

				.order_status {
					font-weight: 400;
					font-size: 26rpx;
					color: #6363ff;
				}
			}

			.order_date {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin-top: 16rpx;
			}
		}

		.studio_name_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
			margin-top: 48rpx;
			border-bottom: 1rpx solid #e4e6e6;
			padding-bottom: 24rpx;
		}

		.order_server_info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.server_info_box {
				display: flex;
				align-items: center;
				flex-direction: row;
				width: calc(100% - 120rpx - 16rpx);

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
				}

				.name_price {
					margin-left: 16rpx;
					max-width: calc(100% - 120rpx - 16rpx);

					.server_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.specs_price {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						.server_specs {
						}

						.server_price {
						}
					}
				}
			}

			.multiple_specs_scroll {
				white-space: nowrap;
				width: calc(100% - 128rpx);

				.server_info_box {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					position: relative;
					margin-right: 16rpx;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.specs_box {
						position: absolute;
						top: 8rpx;
						left: 8rpx;
						max-width: 98rpx;
						padding: 4rpx;
						box-sizing: border-box;
						background: #f9f6f6;
						border-radius: 4rpx;
						font-weight: 400;
						font-size: 18rpx;
						color: #1b2120;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.server_price {
						position: absolute;
						bottom: 0;
						right: 0;
						padding: 8rpx 10rpx;
						box-sizing: border-box;
						background: rgba(0, 0, 0, 0.35);
						border-radius: 24rpx 0rpx 24rpx 0rpx;
						font-weight: bold;
						font-size: 18rpx;
						color: #ffffff;
					}
				}
			}

			.order_price_box {
				width: 128rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

				.order_price {
					font-weight: bold;
					font-size: 28rpx;
					color: #1b2120;
				}

				.pay_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}

		.order_other_info_box {
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.other_info_item {
				display: flex;
				flex-direction: row;
				margin-bottom: 40rpx;

				.other_label {
					width: 96rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #5c5e5e;
				}

				.other_value {
					max-width: calc(100% - 96rpx - 16rpx);
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-left: 16rpx;

					.pet_name_date {
						display: inline-block;
						//margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-right: 24rpx;
					}
				}
			}

			.other_info_item:last-child {
				margin-bottom: 0;
			}
		}

		.pet_teacher_box {
			display: flex;
			align-items: center;
			flex-direction: row;
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.pet_teacher_title {
				width: 130rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #5c5e5e;
			}

			.pet_teacher_img {
				margin-left: 16rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}

			.pet_teacher_name {
				margin-left: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #7c807f;
			}
		}

		//.order_status_box {
		//	display: flex;
		//	justify-content: space-between;
		//	align-items: center;
		//
		//	.studio_info {
		//		display: flex;
		//		align-items: center;
		//
		//		.studio_img {
		//			width: 48rpx;
		//			height: 48rpx;
		//			border-radius: 50%;
		//			margin-right: 8px;
		//		}
		//
		//		.studio_name {
		//			font-weight: 400;
		//			font-size: 32rpx;
		//			color: #1b2120;
		//			max-width: 240rpx;
		//			overflow: hidden;
		//			text-overflow: ellipsis;
		//			white-space: nowrap;
		//		}
		//
		//		.designated_order {
		//			display: flex;
		//			align-items: center;
		//			justify-content: center;
		//			width: 88rpx;
		//			height: 40rpx;
		//			background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		//			border-radius: 24rpx 24rpx 24rpx 0rpx;
		//			font-weight: 400;
		//			font-size: 24rpx;
		//			color: #ffffff;
		//			margin-left: 8rpx;
		//		}
		//
		//		.transfer_order {
		//			display: flex;
		//			align-items: center;
		//			justify-content: center;
		//			padding: 0 8rpx;
		//			box-sizing: border-box;
		//			height: 40rpx;
		//			background: #7777f3;
		//			border-radius: 24rpx 24rpx 24rpx 0rpx;
		//			font-weight: 400;
		//			font-size: 24rpx;
		//			color: #ffffff;
		//			margin-left: 8rpx;
		//		}
		//	}
		//
		//	.order_status {
		//		font-weight: bold;
		//		font-size: 32rpx;
		//		color: #1b2120;
		//	}
		//}
		//
		//.order_server_info {
		//	width: 100%;
		//	background: #f8f8f8;
		//	border-radius: 24rpx;
		//	padding: 32rpx 24rpx 0;
		//	box-sizing: border-box;
		//	margin-top: 40rpx;
		//
		//	.server_info_box {
		//		display: flex;
		//		flex-direction: row;
		//		align-items: center;
		//		padding-bottom: 32rpx;
		//		border-bottom: 1rpx solid #e4e6e6;
		//
		//		.server_img {
		//			width: 160rpx;
		//			height: 160rpx;
		//			border-radius: 24rpx;
		//		}
		//
		//		.server_info {
		//			width: calc(100% - 160rpx - 16rpx);
		//			margin-left: 16rpx;
		//
		//			.server_name_price {
		//				display: flex;
		//				justify-content: space-between;
		//				align-items: center;
		//				margin-bottom: 24rpx;
		//
		//				.server_name {
		//					font-weight: bold;
		//					font-size: 32rpx;
		//					color: #1b2120;
		//				}
		//
		//				.price_times {
		//					font-weight: 400;
		//					font-size: 26rpx;
		//					color: #1b2120;
		//				}
		//			}
		//
		//			.pets_box {
		//				display: flex;
		//
		//				.pets_label {
		//					font-weight: 400;
		//					font-size: 26rpx;
		//					color: #7c807f;
		//					width: 78rpx;
		//				}
		//
		//				.pets_value {
		//					font-weight: 400;
		//					font-size: 26rpx;
		//					color: #7c807f;
		//					width: calc(100% - 78rpx);
		//					overflow: hidden;
		//					white-space: nowrap;
		//					text-overflow: ellipsis;
		//					-o-text-overflow: ellipsis;
		//
		//					.dividing_line {
		//						display: inline-block;
		//						width: 2rpx;
		//						height: 24rpx;
		//						background: #7c807f;
		//						margin: 0 8rpx;
		//					}
		//				}
		//			}
		//		}
		//	}
		//
		//	.server_address_box {
		//		display: flex;
		//		margin-top: 32rpx;
		//		padding-bottom: 32rpx;
		//
		//		.address_label {
		//			font-weight: bold;
		//			font-size: 30rpx;
		//			color: #1a1a1a;
		//			width: 176rpx;
		//		}
		//
		//		.address_value {
		//			font-weight: 400;
		//			font-size: 26rpx;
		//			color: #7c807f;
		//			width: calc(100% - 176rpx);
		//			overflow: hidden;
		//			white-space: nowrap;
		//			text-overflow: ellipsis;
		//		}
		//	}
		//
		//	.pet_teacher_box {
		//		display: flex;
		//		border-top: 1rpx solid #e4e6e6;
		//		padding-top: 30rpx;
		//		padding-bottom: 32rpx;
		//
		//		.pet_teacher_label {
		//			font-weight: bold;
		//			font-size: 30rpx;
		//			color: #1a1a1a;
		//			width: 176rpx;
		//		}
		//
		//		.pet_teacher_value {
		//			display: flex;
		//			align-items: center;
		//			width: calc(100% - 176rpx);
		//
		//			.pet_teacher_img {
		//				width: 48rpx;
		//				height: 48rpx;
		//				border-radius: 50%;
		//			}
		//
		//			.pet_teacher_name {
		//				font-weight: 400;
		//				font-size: 30rpx;
		//				color: #1b2120;
		//				margin-left: 8rpx;
		//			}
		//		}
		//	}
		//}

		.order_total_price {
			text-align: right;
			margin-top: 16rpx;
			//margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #1b2120;
		}

		.operation_btn_box {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.hollow_btn {
				box-sizing: border-box;
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.solid_btn {
				box-sizing: border-box;
				width: 196rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.btn_mg {
				margin-right: 16rpx;
			}

			.btn_mg:last-child {
				margin-right: 0;
			}

			.refuse_btn {
				width: 240rpx;
				height: 72rpx;
				margin-bottom: 40rpx;
			}

			.accept_immediately_box {
				text-align: center;
				width: 366rpx;
				height: 72rpx;
				background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
				border-radius: 62rpx;
				font-weight: 400;
				color: #ffffff;
				padding: 10rpx 0 8rpx;
				box-sizing: border-box;
				line-height: 1;
				margin-left: 16rpx;
				margin-bottom: 40rpx;

				.accept_immediately {
					font-size: 26rpx;
				}

				.immediately_time {
					font-size: 20rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
}

.empty_box {
	text-align: center;
	font-weight: 400;
	font-size: 32rpx;
	color: #1b2120;

	.empty_img {
		width: 400rpx;
		height: 315rpx;
		margin-top: 320rpx;
		margin-bottom: 50rpx;
	}
}

.f_wrap {
	flex-wrap: wrap;
}

.m_l_r_8 {
	margin: 0 8rpx;
}

.refuse_pop {
	width: 100%;
	background: #f9f6f6;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	padding: 68rpx 32rpx;
	box-sizing: border-box;

	.pop_title_box {
		display: flex;
		justify-content: space-between;

		.pop_title {
			font-weight: bold;
			font-size: 40rpx;
			color: #1b2120;
		}

		.closeempty_icon {
			color: #1b2120;
			font-weight: bold;
		}
	}

	.refuse_reason_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
		margin-top: 52rpx;
		margin-bottom: 42rpx;

		.refuse_title {
			font-weight: 400;
			font-size: 32rpx;
			color: #1b2120;
		}

		.reason_item_box {
			padding: 44rpx 0;
			box-sizing: border-box;
			border-bottom: 1px solid #e4e6e6;

			.reason_text_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.reason_text {
					font-weight: 400;
					font-size: 32rpx;
					color: #1b2120;
				}

				.select_img {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}

			.refuse_textarea {
				width: 100%;
				height: 236rpx;
				background: #f9f6f6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 32rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 30rpx;
				color: #1b2120;
			}
		}

		.reason_item_box:last-child {
			border-bottom: none;
		}
	}

	.footer_btn_box {
		width: 100%;
		background: #ffffff;
		padding: 8rpx 24rpx 8rpx 40rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: calc(8rpx + var(--safe-area-bottom));

		.confirm_btn {
			width: 100%;
			height: 88rpx;
		}
	}
}
</style>
